﻿<div [@routerTransition]>
    <div id="HostDashboard" [busyIf]="loading">
        <div class="row margin-bottom-5">
            <div class="col-xs-6">
                <div class="page-head">
                    <div class="page-title">
                        <h1>
                            <span>{{l("Dashboard")}}</span> <small>{{l("HostDashboardHeaderInfo")}}</small>
                        </h1>
                    </div>
                </div>
            </div>
            <div class="col-xs-6 text-right">
                <button name="RefreshButton" class="btn blue" (click)="getDashboardStatisticsData()"><i class="fa fa-refresh"></i> {{l("Refresh")}}</button>
                <div #DashboardDateRangePicker class="dashboard-report-range pull-right tooltips btn btn-fit-height green-sharp"
                     data-placement="top">
                    <span class="selected-date-text uppercase hidden-xs">
                        {{selectedDateRange.startDate.format('LL')}} - {{selectedDateRange.endDate.format('LL')}}
                    </span>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat2 new-subscription-statistics">
                    <div class="display">
                        <div class="number">
                            <h3 class="new-subscription-amount counterup font-purple-soft">
                                {{hostDashboardData != null ? hostDashboardData.newSubscriptionAmount : "..."}}
                                <small class="font-purple-soft">$</small>
                            </h3>
                            <small>{{l("NewSubscriptionAmount")}}</small>
                        </div>
                        <div class="icon">
                            <i class="fa fa-money"></i>
                        </div>
                    </div>
                    <div class="progress-info">
                        <div class="progress">
                            <span style="width: 100%;" class="progress-bar progress-bar-success purple-soft">
                            </span>
                        </div>
                        <div class="status">
                            <div class="status-title">
                                {{selectedDateRange.startDate.format('L')}} - {{selectedDateRange.endDate.format('L')}}
                            </div>
                            <div class="status-number"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat2 new-tenants-statistics">
                    <div class="display">
                        <div class="number">
                            <h3 class="new-tenants-count counterup font-red-haze">
                                {{hostDashboardData != null ? hostDashboardData.newTenantsCount : "..."}}
                            </h3>
                            <small>{{l("NewTenants")}}</small>
                        </div>
                        <div class="icon">
                            <i class="icon-user-following"></i>
                        </div>
                    </div>
                    <div class="progress-info">
                        <div class="progress">
                            <span style="width: 100%;" class="progress-bar progress-bar-success red-haze">
                                <span class="sr-only"></span>
                            </span>
                        </div>
                        <div class="status">
                            <div class="status-title">
                                {{selectedDateRange.startDate.format('L')}} - {{selectedDateRange.endDate.format('L')}}
                            </div>
                            <div class="status-number"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat2 dashboard-statistics1">
                    <div class="display">
                        <div class="number">
                            <h3 class="dashboard-placeholder1 counterup font-blue-sharp">
                                {{hostDashboardData != null ? hostDashboardData.dashboardPlaceholder1 : "..."}}
                            </h3>
                            <small>{{l("DashboardSampleStatistics")}} 1</small>
                        </div>
                        <div class="icon">
                            <i class="icon-pie-chart"></i>
                        </div>
                    </div>
                    <div class="progress-info">
                        <div class="progress">
                            <span style="width: 45%;" class="progress-bar progress-bar-success blue-sharp">
                                <span class="sr-only">45% {{l("DashboardSampleStatisticsHelpText")}}</span>
                            </span>
                        </div>
                        <div class="status">
                            <div class="status-title"> {{l("DashboardSampleStatisticsHelpText")}} </div>
                            <div class="status-number"> 45% </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="dashboard-stat2 dashboard-statistics2">
                    <div class="display">
                        <div class="number">
                            <h3 class="dashboard-placeholder2 counterup font-green-sharp">
                                {{hostDashboardData != null ? hostDashboardData.dashboardPlaceholder2 : "..."}}
                            </h3>
                            <small>{{l("DashboardSampleStatistics")}} 2</small>
                        </div>
                        <div class="icon">
                            <i class="icon-like"></i>
                        </div>
                    </div>
                    <div class="progress-info">
                        <div class="progress">
                            <span style="width: 65%;" class="progress-bar progress-bar-success green-sharp">
                                <span class="sr-only">65% {{l("DashboardSampleStatisticsHelpText")}}</span>
                            </span>
                        </div>
                        <div class="status">
                            <div class="status-title"> {{l("DashboardSampleStatisticsHelpText")}} </div>
                            <div class="status-number"> 65% </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6 col-sm-12">
                <div class="portlet light portlet-fit bordered income-statistics">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-graph font-blue"></i>
                            <span class="caption-subject font-blue bold uppercase">{{l("IncomeStatistics")}}</span>
                            <span class="caption-helper">{{selectedDateRange.startDate.format('L')}} - {{selectedDateRange.endDate.format('L')}}</span>
                        </div>
                        <div class="actions">
                            <div class="btn-group btn-group-devided">
                                <label class="btn blue btn-outline btn-circle btn-sm" [ngClass]="{'active': selectedIncomeStatisticsDateInterval==appIncomeStatisticsDateInterval.Daily}">
                                    <input type="radio"
                                           name="IncomeStatisticsDatePeriod"
                                           (change)="incomeStatisticsDateIntervalChange($event)"
                                           [(ngModel)]="selectedIncomeStatisticsDateInterval"
                                           [value]="appIncomeStatisticsDateInterval.Daily">
                                    {{l("Daily")}}
                                </label>
                                <label class="btn blue btn-outline btn-circle btn-sm" [ngClass]="{'active': selectedIncomeStatisticsDateInterval==appIncomeStatisticsDateInterval.Weekly}">
                                    <input type="radio"
                                           name="IncomeStatisticsDatePeriod"
                                           (change)="incomeStatisticsDateIntervalChange($event)"
                                           [(ngModel)]="selectedIncomeStatisticsDateInterval"
                                           [value]="appIncomeStatisticsDateInterval.Weekly">
                                    {{l("Weekly")}}
                                </label>
                                <label class="btn blue btn-outline btn-circle btn-sm" [ngClass]="{'active': selectedIncomeStatisticsDateInterval==appIncomeStatisticsDateInterval.Monthly}">
                                    <input type="radio"
                                           name="IncomeStatisticsDatePeriod"
                                           (change)="incomeStatisticsDateIntervalChange($event)"
                                           [(ngModel)]="selectedIncomeStatisticsDateInterval"
                                           [value]="appIncomeStatisticsDateInterval.Monthly">
                                    {{l("Monthly")}}
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div #IncomeStatisticsChart 
                             class="chart income-statistics-chart"
                             [busyIf]="loadingIncomeStatistics" 
                             [hidden]="!incomeStatisticsHasData">
                        </div>
                        <div class="note note-info text-center chart" 
                             [hidden]="incomeStatisticsHasData">
                            <small class="text-muted">{{l("NoData")}}</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-12">
                <div class="portlet light portlet-fit bordered edition-statistics">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-pie-chart font-green-seagreen"></i>
                            <span class="caption-subject font-green-seagreen bold uppercase">{{l("EditionStatistics")}}</span>
                            <span class="caption-helper">{{selectedDateRange.startDate.format('L')}} - {{selectedDateRange.endDate.format('L')}}</span>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div #EditionStatisticsChart
                             class="edition-statistics-chart chart" 
                             [hidden]="!editionStatisticsHasData">
                        </div>
                        <div class="note note-info text-center text-muted " 
                             [hidden]="editionStatisticsHasData">
                            <small class="text-muted">{{l("NoData")}}</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <div class="portlet light portlet-fit bordered expiring-tenants">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-graduation font-red-pink"></i>
                            <span class="caption-subject font-red-pink bold uppercase">{{l("SubscriptionExpiringTenants")}}</span>
                            <div class="caption-helper" *ngIf="hostDashboardData">
                                {{l("ExpiringTenantsHelpText", hostDashboardData.subscriptionEndAlertDayCount, hostDashboardData.maxExpiringTenantsShownCount)}}
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller chart" data-always-visible="1" data-rail-visible="0">
                            <div class="primeng-datatable-container expiring-tenants-table" [busyIf]="primengDatatableHelper.isLoading">
                                <p-dataTable #ExpiringTenantsTable
                                             [value]="expiringTenantsData"
                                             rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
                                             [paginator]="false"
                                             [lazy]="false"
                                             emptyMessage="{{l('NoData')}}"
                                             [responsive]="primengDatatableHelper.isResponsive">

                                    <p-column field="tenantName" header="{{l('TenantName')}}"></p-column>
                                    <p-column field="remainingDayCount" header="{{l('RemainingDay')}}"></p-column>
                                </p-dataTable>
                            </div>
                        </div>
                        <div class="scroller-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="javascript:;" class="see-all-expiring-tenants" (click)="gotoAllExpiringTenants()">{{l("SeeAllRecords")}}</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 col-xs-12 col-sm-12">
                <div class="portlet light portlet-fit bordered recent-tenants">
                    <div class="portlet-title">
                        <div class="caption">
                            <i class="icon-user-follow font-purple-soft"></i>
                            <span class="caption-subject font-purple-soft bold uppercase">{{l("RecentTenants")}}</span>
                            <div class="caption-helper" *ngIf="hostDashboardData">
                                {{l("RecentTenantsHelpText", hostDashboardData.recentTenantsDayCount, hostDashboardData.maxRecentTenantsShownCount)}}
                            </div>
                        </div>
                    </div>
                    <div class="portlet-body">
                        <div class="scroller chart" data-always-visible="1" data-rail-visible="0">
                            <div class="primeng-datatable-container recent-tenants-table" [busyIf]="primengDatatableHelper.isLoading">
                                <p-dataTable #RecentTenantsTable
                                             [value]="recentTenantsData"
                                             rows="{{primengDatatableHelper.defaultRecordsCountPerPage}}"
                                             [paginator]="false"
                                             [lazy]="false"
                                             emptyMessage="{{l('NoData')}}"
                                             [responsive]="primengDatatableHelper.isResponsive">

                                    <p-column field="name" header="{{l('TenantName')}}"></p-column>
                                    <p-column field="creationTime" header="{{l('CreationTime')}}">
                                        <ng-template let-record="rowData" pTemplate="body">
                                            {{ record.creationTime | momentFormat:'L LT'}}
                                        </ng-template>
                                    </p-column>
                                </p-dataTable>
                            </div>
                        </div>
                        <div class="scroller-footer">
                            <div class="btn-arrow-link pull-right">
                                <a href="javascript:;" class="see-all-recent-tenants" (click)="gotoAllRecentTenants()">{{l("SeeAllRecords")}}</a>
                                <i class="icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
